import { defineComponent, reactive, ref } from "vue";
import styles from "./index.module.less";
import Page from "@/components/Page/Page";
import useTableHook from "@/common/hooks/useTableHook";
import supplierStatusDict from "@/common/dicts/supplierStatusDict";
import TableSection from "@/components/TableSection/TableSection";
import SearchForm from "@/components/SearchForm/SearchForm";
import Toolbar from "@/components/Toolbar/Toolbar";
import Operation from "@/components/Operation/Operation";
import supplierTypeDict from "@/common/dicts/supplierTypeDict";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "SupplierListMgr",
  setup() {
    const tableHook = useTableHook();
    const router = useRouter();
    const state = reactive({
      searchForm: [
        {
          key: 'name',
          label: "供应商名称",
          value: null,
          type: "input",
          attrs: {},
        },
        {
          key: 'code',
          label: "统一社会信用代码",
          value: null,
          type: "input",
          attrs: {},
        },
        {
          key: 'status',
          label: "状态",
          value: null,
          type: "select",
          datas: supplierStatusDict,
          attrs: {},
        },
      ],
      toolbar: [
        {
          el: () => <a-button type="primary" onClick={() => { }}>查询</a-button>
        },
        {
          el: () => <a-button type="primary" onClick={() => { router.push({ name: "SupplierListAdd" }) }}>新增</a-button>
        },
        {
          el: () => <a-button type="primary" disabled={tableHook.state.selectedRowKeys?.length === 0}>启用</a-button>
        },
        {
          el: () => <a-button type="primary" danger disabled={tableHook.state.selectedRowKeys?.length === 0}>禁用</a-button>
        },
      ]
    })
    const searchFormRef = ref(null as any);
    tableHook.defineColumns([
      {
        title: "序号",
        dataIndex: "index",
        align: "center",
        width: "50px",
      },
      {
        title: "操作",
        dataIndex: "operation",
        align: "center",
      },
      {
        title: "供应商名称",
        dataIndex: "name",
        align: "center",
      },
      {
        title: "供应商分类",
        dataIndex: "type",
        align: "center",
      },
      {
        title: "联系方式",
        dataIndex: "mobile",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        align: "center",
      },
      {
        title: "准入时间",
        dataIndex: "createTime",
        align: "center",
      },
      {
        title: "修改时间",
        dataIndex: "updateTime",
        align: "center",
      },
      {
        title: "修改人",
        dataIndex: "updateUserName",
        align: "center",
      },
    ])
    const getList = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: [{
              id: 1,
              name: "测试供应商",
              type: 1,
              mobile: "13291952527",
              status: 1,
              createTime: "2025-04-28 13:44:21",
              updateTime: "2025-04-28 13:44:21",
              updateUserName: "admin",
            }]
          })
        }, 1000)
      })
    }

    tableHook.setSyncDataSource(getList);
    return () => (
      <Page>
        <div class={styles.supplierList}>
          <TableSection v-slots={{
            searchForm: () => <SearchForm ref={searchFormRef} v-model:config={state.searchForm} />,
            toolbar: () => <Toolbar v-model:config={state.toolbar} />,
            table: () => <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              columns={tableHook.state.columns}
              dataSource={tableHook.state.dataSource}
              loading={tableHook.state.loading}
              rowKey="id"
              pagination={tableHook.state.pagination}
              rowSelection={tableHook.rowSelection.value}
              v-slots={{
                bodyCell: ({ column, record, index, text }) => {
                  if (column.dataIndex === 'index') {
                    return tableHook.getIndex(index);
                  }
                  if (column.dataIndex === 'status') {
                    const status = supplierStatusDict.find(x => x.value === record.status);
                    return <span class={`${status?.type}-font`}>{status?.label}</span>;
                  }
                  if (column.dataIndex === 'type') {
                    const type = supplierTypeDict.find(x => x.value === record.type);
                    return <span>{type?.label}</span>;
                  }
                  if (column.dataIndex === 'operation') {
                    return <div class={styles.operationBox}>
                      <Operation btns={[
                        () => <a-button size="small" type="link" onclick={() => {
                          router.push({ name: "SupplierListDetail", params: { id: record.id } })
                        }}>明细</a-button>,
                        () => <a-button size="small" type="link" onclick={() => {
                          router.push({ name: "SupplierListEdit", params: { id: record.id } })
                        }}>修改</a-button>
                      ]} />
                    </div>
                  }
                }
              }}
            />,
          }} />
        </div>
      </Page>
    )
  }
})